<template>
  <div id="container" class="d-flex justify-content-end">
    <iframe  :src="getSearchUrl()" />

    <!-- 收藏按钮 -->
    <button id="favoriteButton" class="fixed-top-right" @click="toggleFavorite">
      <i :class="isFavorite ? 'fas fa-star' : 'far fa-star'"></i> 收藏
    </button>

    <!-- 智能整理按钮 -->
    <button id="smartOrganizeButton" class="fixed-top-right smart-organize" @click="toggleSmartOrganize">
      <i class="fas fa-cogs"></i> 智能整理
    </button>

    <!-- 收藏弹窗组件 -->
    <transition name="slide-fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <FavoriteDialog  
        @update:isFavorite="isFavorite = $event"
      :isFavorite="isFavorite"  v-show="isFavoriteDialogVisible" :isVisible="isFavoriteDialogVisible" @close="closeFavoriteDialog"
        class="dialog-container" />
    </transition>

    <!-- 智能整理弹窗组件 -->
    <transition name="slide-fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <SmartFolderDialog v-show="isSmartOrganizeDialogVisible" :isVisible="isSmartOrganizeDialogVisible"
        @close="closeSmartOrganizeDialog" class="dialog-container" />
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useSearchStore } from '@/store/search'
import FavoriteDialog from '@/components/FavoriteDialog.vue'
import SmartFolderDialog from '@/components/SmartFolderDialog.vue' // 引入智能整理弹窗组件
import { isFav,removeUrl } from '@/api/favorite/favorite'
import { useRoute, useRouter } from 'vue-router'
import { showErrMsg } from '@/utils/message'

const searchStore = useSearchStore()
const isFavorite = ref(false)
const isFavoriteDialogVisible = ref(false)
const isSmartOrganizeDialogVisible = ref(false) // 新增智能整理弹窗状态


// 获取当前路由对象
const route = useRoute();
// 获取路由器实例

function  getSearchUrl(){
  const urlParam = route.query.url;
  return urlParam as string;
}

isFav(getSearchUrl()).then((res) =>{
  isFavorite.value = (res as unknown as {res:boolean}).res
})

// 切换收藏状态并显示弹窗
const toggleFavorite = () => {
  if (isFavorite.value){//取消收藏
    removeUrl(getSearchUrl()).then(
      (res) =>{
        if ((res as unknown as {res:boolean}).res){
          isFavorite.value = false
        }else{
          showErrMsg("取消收藏失败，请重试")
        }
      }
    ).catch((err) =>{
      showErrMsg("取消收藏失败，请重试")
    })
  }
  isFav(getSearchUrl()).then((res) =>{
  isFavorite.value = (res as unknown as {res:boolean}).res
})
if(!isFavorite.value){
  isFavoriteDialogVisible.value = true
}
}

// 关闭收藏弹窗
const closeFavoriteDialog = () => {
  isFavoriteDialogVisible.value = false
}

// 切换智能整理状态并显示弹窗
const toggleSmartOrganize = () => {
  isSmartOrganizeDialogVisible.value = !isSmartOrganizeDialogVisible.value
}

// 关闭智能整理弹窗
const closeSmartOrganizeDialog = () => {
  isSmartOrganizeDialogVisible.value = false
}

const handleBeforeUnload = (event: { preventDefault: () => void; returnValue: string; }) => {
  // 清空store
  searchStore.updateSearchUrl("");

};

// 监听键盘事件，关闭弹窗
const handleEscKey = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    closeFavoriteDialog()
    closeSmartOrganizeDialog()
  }
}

// 在 mounted 时添加键盘监听，组件销毁时移除监听
onMounted(() => {
  window.addEventListener('keydown', handleEscKey)
  window.addEventListener('beforeunload', handleBeforeUnload);
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleEscKey)
  window.removeEventListener('beforeunload', handleBeforeUnload)
})

// 弹窗动画的钩子函数（仅保留打开时的动画）
const beforeEnter = (el: HTMLElement) => {
  el.style.opacity = 0
  el.style.transform = 'translate(50%, -50%) scale(0.5)'
  
}

const enter = (el: HTMLElement, done: () => void) => {
  el.offsetHeight // 强制重绘
  el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'
  el.style.opacity = 1
  el.style.transform = 'translate(0%, 0%) scale(1)'
  done()
}

const leave = (el: HTMLElement, done: () => void) => {
  el.style.transition = 'opacity 0.6s ease'
  el.style.opacity = 0
  done()
}
</script>

<style scoped>
#container {
  height: 100vh;
}

.fixed-top-right {
  position: fixed;
  top: 10px;
  right: 40px;
  z-index: 1000;
  background-color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.smart-organize {
  right: 150px;
  /* 使智能整理按钮与收藏按钮不重叠 */
}

.fixed-top-right i {
  margin-right: 8px;
  transition: color 0.6s ease;
}

.fas.fa-star {
  color: black;
}

.far.fa-star {
  color: gray;
}

.fas.fa-cogs {
  color: #333;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 弹窗的过渡动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: opacity 0.6s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-to {
  opacity: 1;
}

.dialog-container {
  background-color: transparent !important;
  box-shadow: none;
}
</style>